<!--
 * @Date: 2023-03-14 14:28:15
 * @LastEditTime: 2023-10-11 16:02:08
 * @FilePath: /wkw/src/tabbar/home/index.vue
 * 介绍:首页
-->

<script lang="ts" setup name="home">
import { addCache } from "@@/hooks/routeCache";
import { _require } from "@@/utils/tools";
import type CpageView from "@@/components/common/CpageView/CpageView.vue";
import coinTrend from "./components/coinTrend.vue";
import taskDynamic from "./components/taskDynamic.vue";
import problem from "./components/problem.vue";
import PubSub from "pubsub-js";
import useTabPageStore from "@@/store/useTabPageStore";
import { toArticlePage } from "@@/views/articlePage/mix";

const tabBageStore = useTabPageStore();
const { homeData } = storeToRefs(tabBageStore);

const CpageViewRef = ref<InstanceType<typeof CpageView>>();
/**首页数据 */

tabBageStore.getHomeData();
addCache("home");
PubSub.subscribe("__changeLang__", onRefresh);

/**获取首页数据 */
async function onRefresh() {
  CpageViewRef.value?.pullRefreshStart();
  const [homeRes] = await Promise.all([tabBageStore.getHomeData()]);
  if (!homeRes) return CpageViewRef.value?.pullRefreshFail();
  homeData.value = homeRes;
  CpageViewRef.value?.pullRefreshSuccess();
}
</script>

<template>
  <CpageView ref="CpageViewRef" @refresh="onRefresh" pull-refresh class="home">
    <div class="auto-MT-md">
      <div class="banner auto-MT-sm">
        <h2>{{ $t("wei-ke-wang") }}</h2>
        <h2>
          {{ $t("zhuan-ye-de-qu-kuai-lian-ren-wu-ping-tai") }}
        </h2>
        <Rimage
          class="mask"
          :src="_require('src/assets/images/home_mask.png')"
          height="400rem"
        />
      </div>
      <Ccard class="MT-xl zIndex">
        <!-- 最新动态 -->
        <div class="T-S-sm flex-J-SB flex-A-C">
          <RnoticeBar
            @click="
              toArticlePage({
                ...homeData?.article!,
                pageTitle: 'zui-xing-gong-gao',
                createAt: homeData?.article.updated_at!,
              })
            "
            class="RnoticeBar"
          >
            <h3>{{ homeData?.article.title }}</h3>
          </RnoticeBar>
          <div
            class="T-S-sm C-T3"
            @click.stop="$router.push({ name: 'me-aboutUs' })"
          >
            {{ $t("geng-duo") }}
            <VanIcon name="arrow" />
          </div>
        </div>
        <!-- 折线图 -->
        <coinTrend :homeData="homeData" />
      </Ccard>
      <!-- 任务动态 -->
      <taskDynamic :task="homeData?.task" />
      <!-- 常见问题 -->
      <problem :question="homeData?.question || []" />
    </div>
  </CpageView>
</template>

<style lang="scss" scoped>
.banner {
  position: relative;
  .mask {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-50%);
  }
}
.zIndex {
  position: relative;
  z-index: 2;
}
.RnoticeBar {
  border: none;
  flex: 1;
}
</style>
